---
type: tutorial
title: Astro의 첫 번째 줄 작성
description: |-
  튜토리얼: 첫 번째 Astro 블로그 구축 — 튜토리얼 프로젝트 홈 페이지를 처음으로 편집하세요.
i18nReady: true
---

import Badge from '~/components/Badge.astro';
import Checklist from '~/components/Checklist.astro';
import Box from '~/components/tutorial/Box.astro';
import InstallGuideTabGroup from '~/components/TabGroup/InstallGuideTabGroup.astro';
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';

<PreCheck>
  - 새 웹사이트를 처음으로 편집해 보세요.
</PreCheck>

## 홈페이지 편집

<Steps>
1. 코드 편집기에서 탐색기 파일 창의 `src/pages/index.astro`로 이동한 후 클릭하여 편집 가능한 탭에서 파일 내용을 엽니다.

    `index.astro` 파일의 내용은 다음과 같아야 합니다:

    ```astro title="src/pages/index.astro"
    ---
    ---

    <html lang="en">
      <head>
        <meta charset="utf-8" />
        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
        <meta name="viewport" content="width=device-width" />
        <meta name="generator" content={Astro.generator} >
        <title>Astro</title>
      </head>
      <body>
        <h1>Astro</h1>
      </body>
    </html>
    ```

2. 페이지 `<body>`의 콘텐츠를 편집하세요.

    페이지의 제목 텍스트를 변경하려면 편집기에 입력하고 변경 사항을 저장하세요.

    ```astro title="src/pages/index.astro" del={2} ins={3}
    <body>
      <h1>Astro</h1>
      <h1>My Astro Site</h1>
    </body>
    ```

3. 브라우저 미리보기를 확인하면 페이지 콘텐츠가 새 텍스트로 업데이트된 것을 볼 수 있습니다.
</Steps>

축하해요! 여러분은 이제 Astro 개발자입니다!

이 단계의 나머지 부분에서는 버전 관리와 여러분이 자랑할 수 있는 게시된 웹사이트를 통해 성공할 수 있도록 준비하겠습니다.

<Box icon="check-list">
## 체크리스트

<Checklist>
- [ ] 변경하고 브라우저에서 볼 수 있습니다.
- [ ] 나는 Astro 개발자입니다!
</Checklist>
</Box>
